<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级联动测试</title>
		<style type="text/css">
			select {
				font-size: 24px;
				padding: 5px 16px;
			}
		</style>
		<script type="text/javascript">
			function getCountryName() {
				var countryName = document.getElementById("country").value;
				alert(countryName);
			}
		</script>
		<script type="text/javascript">
			var data = {
				"北京市" : ["朝阳区", "海淀区", "新城区"],
				"湖南省" : ["长沙市", "湘潭市", "常德市"],
				"广东省" : ["广州市", "深圳市", "中山市"]
			}
			
			function getCities() {
				//1、获取选中的省份名称
				var selectedProvince = document.getElementById("province").value;
				//2、根据省份名称获取该省份所辖的城市(需要提前声明对象)
				var cities = data[selectedProvince];
				//3、将城市列表存入下拉框(存入前需要充值城市下拉框列表)
				var selectCity = document.getElementById("city");
				selectCity.innerHTML = '<option value="none">--请选择城市--</option>';
				if (cities != undefined && cities != null) {
					for (var i = 0; i < cities.length; i++) {
						var newOption = document.createElement("option");
						newOption.innerHTML = cities[i];
						selectCity.append(newOption);
					}
				}
			}
		</script>
	</head>
	<body>
		<select id="country" name="country" onchange="getCountryName()">
			<option value="none">--请选择国家--</option>
			<option value ="中国">中国</option>
			<option value ="美国">美国</option>
			<option value ="日本">日本</option>
		</select>
		<br />
		<br />
		<hr />
		<br />
		<select id="province" name="province" onchange="getCities()">
			<option value="none">--请选择省份--</option>
			<option value ="北京市">北京市</option>
			<option value ="湖南省">湖南省</option>
			<option value ="广东省">广东省</option>
		</select>
		<select id="city" name="city">
			<option value="none">--请选择城市--</option>
		</select>
	</body>
</html>
